<template>
  <div class="cart-control">
      <transition name="move">
          <div class="cart-decrease" v-show="sellnum>0" @click.stop="drcreaseCount(count)">
              <i class="inner iconfont icon-jianshao"></i>
          </div>
      </transition>
      <div class="cart-count" v-show="sellnum>0">{{sellnum}}</div>
      <div class="cart-add" @click.stop="addCount(count)">
          <i class="iconfont icon-zengjia"></i>
      </div>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { toRefs } from '@vue/reactivity'
import { useStore } from 'vuex'
export default {
    props: {
        count: Number,
        sellnum: Number
    },
    setup() {
        const state = reactive({
        })
        const store = useStore()
        const addCount = (e) => {
            store.state.num = store.state.num + 1
            let p = store.state.itemlist.find(v => v.itemid === e)
            store.state.totalPrice += p.itemprice
            if(!p.sellcount) {
                p.sellcount = 1
            } else {
                p.sellcount = p.sellcount + 1
            }
        }
        const drcreaseCount = (e) => {
            store.state.num = store.state.num - 1
            let p = store.state.itemlist.find(v => v.itemid === e)
                p.sellcount -= 1
                store.state.totalPrice -= p.itemprice
                for(let i = 0;i < store.state.cartItem.length;i++) {
                    if(store.state.cartItem[i].sellcount === 0) {
                        store.state.cartItem.splice(i, 1)
                    }
                }

        }
        return {
            store,
            addCount,
            drcreaseCount,
            ...toRefs(state),
        }
    }

}
</script>

<style lang="less" scoped>
.cart-control {
    font-size: 0;
    display: flex;
    align-items: center;
    .cart-decrease {
        display: inline-block;
        padding: 6px;
        color: #FFCC33;
        .icon-jianshao {
            font-size: 20px;
        }
    }
    .cart-count {
        display: inline-block;
        width: 12px;
        line-height: 24px;
        text-align: center;
        font-size: 10px;
        color: rgb(147, 153, 159);
        transform: translateY(-20%);

    }
    .cart-add {
        display: inline-block;
        padding: 6px;
        color: #FFCC33;
        .icon-zengjia {
            font-size: 20px;
        }
    }
}
</style>